<template>
  <view>
    <view class="item" v-for="(item, i) in dataList" :key="i">
      <view class="item-top">
        <view class="item-top_l">
          <text class="tag"></text>
          <view class="txt"
            ><text class="star" v-if="item.isOperate">*</text
            >{{ item.flowType }}</view
          >
        </view>
        <view class="item-top_r">{{ formatType(item) }}</view>
      </view>
      <view class="item-user">
        <view class="user-box">
          <!-- 上级审批 -->
          <template v-if="item.rangeType == 'superior'">
            <default-icon :types="1" />
          </template>
          <template v-else>
            <view
              class="user-item"
              v-for="(items, k) in item.selectedUserList"
              :key="items.userId"
            >
              <image class="user-item_icon" :src="items.headUrl" />
              <text class="user-item_name">{{ items.userName }}</text>
              <image
                :src="del"
                class="user-item_del"
                @click="delUser(i, k)"
              ></image>
            </view>
            <template v-if="item.isOperate">
              <default-icon :types="2" @click="addUser(i)" />
            </template>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import defaultIcon from '../../common/default-icon.vue';
import delIcon from '../../images/icon-quxaio.svg';
export default {
  name: 'edit-item',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    list: {
      deep: true,
      immediate: true,
      handler: function (e) {
        this.dataList = e;
      },
    },
  },
  data() {
    return {
      del: delIcon,
      dataList: [],
    };
  },
  components: { defaultIcon },

  methods: {
    formatType(item) {
      // approveType 审批类型[流程类型为审批][single:单人依次,jointly:会签,or:或签]
      const approve = {
        single: '人',
        jointly: '会签',
        or: '或签',
      };
      const { rangeType, approveType, selectedUserList } = item;
      // 指定成员
      if (rangeType == 'assign') {
        return selectedUserList.length + approve[approveType];
      }
      // 发起人自选
      if (rangeType == 'customize') {
        return `发起人自选${selectedUserList.length + approve[approveType]}`;
      }
      // 上级审批
      if (rangeType == 'superior') {
        return `上一节点审批人指定`;
      }
      return '';
    },
    delUser(i, k) {
      const target = this.dataList[i];
      target.selectedUserList.splice(k, 1);
      this.$set(this.dataList, i, target);
    },
    addUser(i) {
      this.$emit('add-user', this.callback, i);
    },
    callback(list, i) {
      const target = this.dataList[i];
      target.selectedUserList = [...target.selectedUserList, ...list];
      this.$set(this.dataList, i, target);
    },
  },

  created() {},
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  min-height: 170rpx;
  box-sizing: border-box;
  padding: 0 24rpx;
  &:nth-last-of-type(1) {
    .item-user {
      &::before {
        display: none;
      }
    }
  }
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40rpx;
    &_l {
      display: flex;
      align-items: center;
      padding-left: 34rpx;
      position: relative;
      .tag {
        display: inline-block;
        width: 18rpx;
        height: 18rpx;
        background: #d8d8d8;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
      .txt {
        font-size: 30rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        .star {
          font-weight: 400;
          text-align: left;
          color: #fe4f54;
        }
      }
    }
    &_r {
      font-size: 26rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
    }
  }
  &-user {
    min-height: 170rpx;
    position: relative;
    padding: 32rpx 24rpx;

    &::before {
      display: inline-block;
      content: '';
      height: calc(100% + 40rpx);
      border-left: 1px solid #d8d8d8;
      position: absolute;
      left: 9rpx;
      top: -10rpx;
      z-index: 1;
    }

    .user-box {
      display: flex;
      flex-wrap: wrap;

      .user-item {
        position: relative;
        height: 128rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-right: 24rpx;
        margin-bottom: 28rpx;
        &:nth-of-type(6n) {
          margin-right: 0;
        }
        &_del {
          position: absolute;
          top: -16rpx;
          right: 1rpx;
          z-index: 1;
          display: inline-block;
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
        }
        &_icon {
          display: inline-block;
          height: 88rpx;
          width: 88rpx;
          border-radius: 50%;
        }
        &_name {
          font-size: 26rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
        }
      }
    }
  }
}
</style>
